<template>
	<view class="business-card">
		<view class="title">
			请完善以下信息
		</view>
		<view class="head">
			<view class="head-mesg">
				<view class="mesg">
					<view class="schedule-mesg">
						<span style="margin-right: 10rpx;">名片完善度:</span>
						<view style="width: 300rpx;" class="schedule">
							<van-progress :percentage="50" stroke-width="12" :show-pivot="false"></van-progress>
						</view>
						<span style="margin-left: 20rpx;color: #ED6A0C;">50%</span>
					</view>
					<view class="supplement ">
						资料越完善 找活越容易,马上去完善 >>
					</view>
				</view>
				<view class="browseNum">
					<view style="font-weight: bold;font-size: 32rpx;color: #007AFF;">0</view>
					<view style="margin-top: 20rpx;">浏览次数</view>
				</view>
			</view>
			<view class="ranking">
				<view class="ranking-top">
					<image src="../../../static/找活名片_03.jpg"></image>
					<span>我的排名点：</span><span>5</span>
				</view>
				<span class="go">马上去提升排名>></span>
			</view>
			<view class="ranking">
				<view class="ranking-top">
					<image src="../../../static/找活名片_03-02.jpg"></image>
					<span>我的置顶：</span><span>未置顶</span>
				</view>
				<span class="go">马上去置顶>></span>
			</view>
		</view>
		<view class="basics">
			<image src="../../../static/找活名片_03-03.jpg"></image>
			基础信息
		</view>
		<view v-if="true" class="perfect">
			完善基础信息，可以发布找活
			<view class="go" @click="peopleMessage">去完善</view>
		</view>
		<view v-else class="basics-mesg">
			<view class="head">
				<view class="">
					<image src='../../../static/项目.png' mode=""></image>
					我的工作状态
				</view>
				<view class="status">审核未通过</view>
			</view>
		</view>
		<view class="basics">
			<image src="../../../static/找活名片_03-04.jpg"></image>
			人员信息
		</view>
		<view v-if="true" class="perfect">
			完善人员信息，能让老板充分了解您或您的队伍
			<view class="go" @click="goPeopleMessage">去完善</view>
		</view>
		<view v-else class="basics-mesg">
			<view class="head">
				<view class="">
					<image src='../../../static/项目.png' mode=""></image>
					我的工作状态
				</view>
				<view class="status">审核未通过</view>
			</view>
		</view>
		<view class="basics">
			<image src="../../../static/找活名片_03-05.jpg"></image>
			项目经验
		</view>
		<view v-if="true" class="perfect">
			添加项目经验,可提升老板对您的信任程度
			<view class="go">去完善</view>
		</view>
		<view v-else class="basics-mesg">
			<view class="head">
				<view class="">
					<image src='../../../static/项目.png' mode=""></image>
					我的工作状态
				</view>
				<view class="status">审核未通过</view>
			</view>
		</view>
		<view class="basics">
			<image src="../../../static/找活名片_03-06.jpg"></image>
			职业技能
		</view>
		<view v-if="true" class="perfect">
			添加职业技能,用实力证明您的能力
			<view class="go" @click="goCertificate">去完善</view>
		</view>
		<view v-else class="basics-mesg">
			<view class="head">
				<view class="">
					<image src='../../../static/项目.png' mode=""></image>
					我的工作状态
				</view>
				<view class="status">审核未通过</view>
			</view>
		</view>
		<view class="more">
			<view class="left"></view>
			<view class="content">附近适合您的工作</view>
			<view class="right"></view>
		</view>
		<view class="">
			<view v-for="message in messages" :key="message.id">
				<my-recruit :people="message"></my-recruit>
			</view>
		</view>
		<view class="recruiting">
			查看更多招工信息
		</view>
	</view>
</template>

<script>
	import myRecruit from '../../../components/recruits.vue'
	import mescrollMixin from '../../../components/mescroll-uni/mescroll-mixins.js'
	import mescrollBody from '../../../components/mescroll-uni/mescroll-body.vue'
	export default {
		mixins: [mescrollMixin],
		data() {
			return {
				messages: [{
						id: 1,
						title: "测试123456789asdasdaddad",
						top: true,
						image: "../../static/首页ok_29-17.jpg",
						name: "李先生",
						concent: "招聘信息asdasdadadssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",
						recruiting: true,
						address: "广州",
						time: "2020-10-15 10:03"
					},
					{
						id: 2,
						title: "测试测试123456789",
						top: false,
						image: "../static/首页ok_29-17.jpg",
						name: "",
						concent: "招聘信息",
						recruiting: false,
						address: "广州天河区广州天河区广州天河区广州天河区",
						time: "2020-10-15 10:03"
					},
					{
						id: 3,
						title: "测试123456789",
						top: true,
						image: "../../static/首页ok_29-17.jpg",
						name: "李先生",
						concent: "招聘信息asdasdadadssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",
						recruiting: true,
						address: "广州",
						time: "2020-10-15 10:03"
					},
					{
						id: 4,
						title: "测试测试123456789",
						top: false,
						image: "../static/首页ok_29-17.jpg",
						name: "",
						concent: "招聘信息",
						recruiting: false,
						address: "广州天河区广州天河区广州天河区广州天河区",
						time: "2020-10-15 10:03"
					},
				]
			}
		},
		components: {
			'myRecruit': myRecruit,
			'mescrollBody': mescrollBody,
		},
		methods: {
			peopleMessage() {
				uni.navigateTo({
					url: '../perfectmessage/myWork'
				})
			},
			goPeopleMessage() {
				uni.navigateTo({
					url: '../perfectmessage/peopleMessage'
				})
			},
			goCertificate() {
				uni.navigateTo({
					url: '../perfectmessage/certificate'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.business-card {
		background: #d9d9d9;

		.title {
			font-size: 32rpx;
			background: #FFFFFF;
			text-align: center;
			width: 100vw;
			line-height: 80rpx;
			margin-bottom: 20rpx;
		}

		.head {
			font-size: 30rpx;
			line-height: 50rpx;
			padding: 20rpx;
			background: #FFFFFF;

			.head-mesg {
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;

				.mesg {
					.schedule-mesg {
						display: flex;
						align-items: center;
					}

					.supplement {
						color: #007AFF;
						margin-top: 20rpx;
					}
				}

				.browseNum {
					text-align: center;
					display: flex;
					flex-direction: column;
				}
			}

			.ranking {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
				border-bottom: solid 1px #cecece;

				.ranking-top {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.go {
					color: #007AFF;
				}
			}
		}

		.basics {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			padding: 16rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.perfect {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #FFFFFF;
			line-height: 60rpx;
			font-size: 32rpx;
			margin-bottom: 20rpx;

			.go {
				display: inline-block;
				background: #007AFF;
				padding: 0 10rpx;
				color: #FFFFFF;
				border-radius: 12rpx;
			}
		}

		.more {
			display: flex;
			line-height: 80rpx;
			background: #FFFFFF;
			justify-content: center;
			align-items: center;
			font-size: 34rpx;

			.left,
			.right {
				width: 32vw;
				border-bottom: solid 1px #cccccc;
			}
		}

		.recruiting {
			text-align: center;
			padding: 30rpx;
			background: #FFFFFF;
			color: #007AFF;
			font-size: 38rpx;
			margin-bottom: 20rpx;
		}
	}
</style>
